<template>
  <div id="search" class="search">
    <div class="cenTop">
      <div class="cenTopImg">
        <router-link to="/"><img src="../../../static/images/signLogo.png" alt="logo"></router-link>
      </div>
      <div class="geographicPosition">
        <i class="el-icon-location"></i>
        <select v-model="couponSelected" @change="getCouponSelected">
          <option v-for="item in cityarr" :key="item.city" :value="item.cityname">{{item.cityname}}</option>
        </select>
      </div>
      <div class="cenSearch">
        <div class="search_box">
          <!-- <el-select v-model="region" placeholder="请选择">
            <el-option label="商品" value="shanghai"></el-option>
            <el-option label="店铺" value="beijing"></el-option>
          </el-select>-->
          <el-input
            placeholder="请输入商家名称"
            v-model="shopname"
            @keyup.enter.native="handsearch"
            class="input-with-select"
          >
            <el-button slot="append" @click="handsearch">搜索</el-button>
          </el-input>
          <router-link to="/msgrelease">
            <el-button type="primary" class="link_release" icon="el-icon-edit-outline">免费发布信息</el-button>
          </router-link>
        </div>

        <div class="often-goods-list">
          <span
            v-for="(item,index) in commdshop"
            :key="index"
            @click="handcommd(item.shopid,item.city)"
          >{{item.shopname}}</span>
        </div>
      </div>
    </div>
    <img class="center-img" src="../../../static/images/immob.png" alt>
  </div>
</template>

<script>
import Bus from "../../assets/js/bus.js"
export default {
  name: "search",
  data() {
    return {
      shopname: "",
      region: "",
      cityarr: [
        {
          city: "shiyan",
          cityname: "十堰市"
        },
        {
          city: "wuhan",
          cityname: "武汉市"
        },
        {
          city: "xiangyan",
          cityname: "襄阳市"
        },
        {
          city: "huanggang",
          cityname: "黄冈市"
        }
      ],
      commdshop: [
        {
          shopid: 1776,
          city: "武汉市",
          shopname: "蜀江烤鱼"
        },
        {
          shopid: 439,
          city: "十堰市",
          shopname: "北欧时光欧式烘焙坊"
        },
        {
          shopid: 1790,
          city: "襄阳市",
          shopname: "鱼的错"
        },
        {
          shopid: 1782,
          city: "黄冈市",
          shopname: "炻肉堂创意石板烧"
        },
        {
          shopid: 1845,
          city: "武汉市",
          shopname: "青田酒馆"
        }
      ],
      couponSelected: ""
    };
  },
  watch: {
    couponSelected: function() {
      sessionStorage.setItem("city", this.couponSelected);
      //消息广播
      Bus.$emit("refresh", this.couponSelected);
    }
  },
  methods: {
    getCouponSelected(val) {
      console.log("val:", val);
      console.log(this.couponSelected);
    },
    handsearch() {
      if (this.shopname) {
        let _parms = {},
          _value = "",
          _Url = "",
          _this = this;
        _parms = {
          searchKey: this.shopname,
          // city:sessionStorage.getItem("city"),
          page: 1,
          rows: 1
        };
        for (var key in _parms) {
          _value += key + "=" + _parms[key] + "&";
        }
        _value = _value.substring(0, _value.length - 1);
        _Url ="/api/website/shop/approve/list?" + _value;
        _Url = encodeURI(_Url);
        this.$axios({
          url: _Url,
          method: "get"
        }).then(res => {
          if (res.data.code == 0) {
            if (res.data.data.list.length > 0) {
              let _shopid = res.data.data.list[0].id;
              _this.couponSelected = res.data.data.list[0].city;
              let currentUrl = window.location.href;
              const reg = RegExp(/storeinformation/);
              if (currentUrl.match(reg)) {
                Bus.$emit("newshopid", _shopid);
              } else {
                _this.$router.push({
                  name: "storeinformation",
                  query: { shopId: _shopid }
                });
              }
            } else {
              this.$message({
                message: "没有匹配到相关商家",
                type: "warning"
              });
            }
            _this.shopname = "";
          }
        });
      } else {
        this.$message({
          message: "请输入一个正确的商家名称搜索",
          type: "warning"
        });
      }
    },
    //点击某个推荐商家
    handcommd(id, city) {
      let _this = this,
        currentUrl = window.location.href,
        reg = RegExp(/storeinformation/);
      this.couponSelected = city;
      if (currentUrl.match(reg)) {
        Bus.$emit("newshopid", id);
      } else {
        _this.$router.push({
          name: "storeinformation",
          query: { shopId: id }
        });
      }
    }
  },
  created() {
    this.couponSelected = this.cityarr[0].cityname;
  }
};
</script>

<style lang="less" scoped>
.search {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  .center-img {
    width: 142px;
    height: 191px;
    position: fixed;
    top: 198px;
    left: 10px;
    z-index: 1;
  }
  .cenTop {
    width: 1340px;
    height: 140px;
    display: flex;
    align-items: center;
    .cenTopImg img {
      display: inline-block;
      width: 165px;
      height: 57px;
    }
    .geographicPosition {
      width: 146px;
      height: 60px;
      line-height: 60px;
      padding-left: 34px;
      i {
        color: #ec832d;
      }
      select {
        border: 0px;
        background: transparent;
        border: none;
        outline: none;
        letter-spacing: 2px;
      }
    }
    .cenSearch {
      width: 50%;
      height: 80px;
      padding-top: 20px;
      .search_box {
        display: flex;
        flex-direction: row;
        .link_release {
          margin-left: 20px;
        }
      }
      .often-goods-list {
        padding-top: 4px;
      }
      .often-goods-list span {
        display: flex;
        list-style: none;
        float: left;
        padding-right: 12px;
        color: #999999;
        font-size: 12px;
        cursor: pointer;
      }
      span:hover {
        color: #4ecfff;
      }
    }
  }
}
</style>

